<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>DOM节点</title>
	</head>

	<body>
		<span>1:node节点属性</span>
		<p>节点属性可以分为元素节点，属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName,ndoeType,nodeValue</p>
		<br />
		<span>2：层次节点属性</span>
		<p>节点的层次结构可以划分为：父节点与子接点、兄弟节点这两种。当我们获取其中一个元素节点的时候，就可以使用 层次节点属性来获取它相关层次节点
		</p>
		<div>
			<span>firstChild和lastChild属性：</span> firstChild用于获取当前元素节点的第一个子节点，相当于childNodes[0];lastChild用于获取当前元素节点的 最后一个子接点，相当于childNodes[box,childNodes.length-1]。
			<span>ownerDocument属性</span> ownerDocument属性返回该节点的文档对象根节点，返回的对象相当于documen。
			<span>parentNode,previousSibling ,nextSibling属性</span>
			<p>parentNode属性返回该节点的父节点，previousSibling属性返回该节点的前一个同级节点，nextSibling属性返回该节点的后一个同级节点</p>
			<span>attributes属性</span>
			<p>attributes属性返回该节点的属性节点集合</p>
			<span>忽略空白文本节点</span>
		</div>

		<div id='box' title="标题" class="divclass">
			测试div
			<em>倾斜</em>结尾
			<p>空白</p>
		</div>
		<div id='pox'>本来</div>
	</body>

	<script>
		window.onload = function() {
			var box = document.getElementById('box');
			/*			alert(box);
						//1:node节点属性
						alert(box.nodeName);//获取元素节点的标签名，和tagName等价 ， DIV
						alert(box.nodeType);//获取元素节点类型值   ， 1
						alert(box.nodeValue);//元素节点本身没有内容，null
						alert(box.innerHTML);//获取元素节点里面的文本内容 ，测试div
						
						//2：层次节点属性
						alert(box.childNodes);//NodeList集合，返回当前元素节点所有的子接点列表  [object NodeList]
						alert(box.childNodes.length);//3
						//第一个子接点为 测试div  这个节点:文本节点
						//第二个子接点为<em>倾斜</em>，这个节点称作：元素节点
						//第三个子接点为：结尾  这个节点也是  文本节点
						
						alert(box.childNodes[0]);//Object Text表示一个文本节点对象   [object Text]
						alert(box.childNodes[0].nodeType);//3   类型3表示文本节点
						alert(box.childNodes[0].nodeValue);//获取文本节点的文本内容     测试div
						//alert(box.childNodes.innerHTML);//undefined，  这个无效 
						alert(box.childNodes[0].nodeName);//#text   文本节点没有标签名
						
						
						
						//遍历属性节点和文本节点
						var box = document.getElementById('box');
						for (var i=0;i<box.childNodes.length;i++) {
							if(box.childNodes[i].nodeType===1){//元素节点类型
								alert('元素节点：'+box.childNodes[i].nodeName);
							}else if(box.childNodes[i].nodeType===3){//文本节点类型
								alert('文本节点：'+box.childNodes[i].nodeValue);
							}
						} 
						
						var pox = document.getElementById('pox');
						pox.innerHTML ='测试<strong>pox</strong>';//加粗，输出文本，且html标签会被解析
						//pox.childNodes[0].nodeValue ='测试<strong>pox</strong>';//nodeValue必须在当前节点上操作,且html标签会被当做纯文本输出
						
						
						
						//获取第一个和最后一个子接点
						alert(box.childNodes[0].nodeValue);//第一个子接点
						alert(box.childNodes[box.childNodes.length-1].nodeValue);//最后一个
						alert(box.firstChild.nodeValue);//第一个子接点
						alert(box.lastChild.nodeValue);//最后一个子接点
					
						alert(box.ownerDocument);//[object HTMLDocument] 返回文档对象根节点
						alert(document);//[object HTMLDocument]
						alert(box.ownerDocument===document);//true
						alert(box.ownerDocument.nodeName);//#document
						alert(box.ownerDocument.nodeType);//9
						
						alert(box.firstChild.nextSibling)//[object HTMLElement]
						alert(box.firstChild.nextSibling.nodeName);//EM  得到下一个同级节点的标签名
						alert(box.lastChild.previousSibling.nodeName);//EM  上一个同级节点的标签名
						
						alert(box.attributes);//[object NamedNodeMap]  集合数组,保存着这个元素节点的属性列表
						alert(box.attributes.length);//3个属性
						alert(box.attributes[0].nodeType);// 2  表示属性节点的属性值
						alert(box.attributes[0].nodeValue);//box  第一个属性的属性值
						alert(box.attributes[0].nodeName);//id  第一个属性的属性名称
						//遍历的时候从后向前的
						alert(box.attributes['title'].nodeValue);//标题  通过属性名称得到属性值  
						*/

			//空白文本节点,不同浏览器对空白文本处理不同
			//1忽略空白字符
			function filterWhiteNode(node) {
				var ret = [];
				for(var i = 0; i < node.length; i++) {
					if(node[i].nodeType === 3 &&/^\s+$/.test(node[i].nodeValue)) {
						continue;
					} else {
						ret.push(node[i]);
					}
				}
				return node;
			}
			alert(filterWhiteNode(box.childNodes).length); //

			//2移除空白文本
			function removeWhiteNode(node) {

				for(var i = 0; i < node.length; i++) {
					if(node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)) {
						node[i].parentNode.removeChild(node[i]);
					}
				}
				return node;
			}

			alert(removeWhiteNode(box.childNodes).length); //

	//firstChild和lastChild等移除空白文本
	
		function removeWhiteNode2(node) {

				for(var i = 0; i < node.childNodes.length; i++) {
					if(node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)) {
						node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
					}
				}
				return node;
			}
		alert(removeWhiteNode2(box).firstChild.nodeName);//#text
		
		
		}
	</script>

</html>